<template>
  <a-modal
    title="详情"
    :visible="visible"
    :width="800"
    :confirmLoading="confirmLoading"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('submit') }"
  >
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="名称"
              v-decorator="[
                'name',
                {
                  rules: [{ required: true, message: '请输入名称!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-select
              v-decorator="[
                'dsType',
                {
                  rules: [{ required: true, message: '请选择类型!' }]
                }
              ]"
              placeholder="请选择"
            >
              <a-select-option :value="0">mysql</a-select-option>
              <a-select-option :value="1">oracle</a-select-option>
              <a-select-option :value="2">postgresql</a-select-option>
              <a-select-option :value="3">sqlServer</a-select-option>
              <a-select-option :value="4">IBMDB2</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="用户名"
              v-decorator="[
                'username',
                {
                  rules: [{ required: true, message: '请输入用户名!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="密码"
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '请输入密码!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="配置方式" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-select
              v-decorator="[
                'confType',
                {
                  rules: [{ required: true, message: '请选择配置方式!' }]
                }
              ]"
              placeholder="请选择"
            >
              <a-select-option :value="0">主机</a-select-option>
              <a-select-option :value="1">JDBC</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="主机" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="主机"
              v-decorator="[
                'host',
                {
                  rules: [{ required: true, message: '请输入主机!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="端口" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="端口"
              v-decorator="[
                'port',
                {
                  rules: [{ required: true, message: '请输入端口!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="实例" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="实例"
              v-decorator="[
                'instance',
                {
                  rules: [{ required: true, message: '请输入实例!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="数据库" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
            <a-input
              placeholder="数据库"
              v-decorator="[
                'dsName',
                {
                  rules: [{ required: true, message: '请输入数据库!' }]
                }
              ]"
            />
          </a-form-item>
        </a-col>
       <a-col :span="12">
         <a-form-item label="url" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
           <a-input
             placeholder="url"
             v-decorator="[
               'url',
               {
                 rules: [{ required: true, message: '请输入url!' }]
               }
             ]"
           />
         </a-form-item>
       </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 12 }
      },
      wrapperCol: {
        xs: { span: 8 },
        sm: { span: 12 }
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'post_from' })
  }
}
</script>
